/**
* 课程管理
*/
<template>
  <div>
     <el-page-header @back="goBack" content="视频列表"> </el-page-header>
    <!-- 数据 -->
    <div class="user-search">
      <el-row :gutter="20">
        <el-col :span="4" v-for="item in courseList" :key="item.lessonId">
          <div
            style="cursor: pointer"
            class="grid-content bg-purple"
            @click="topayVideo(item)"
          >
            <el-image class="grid-content-img" :src="item.coverPlan">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <div class="grid-content-title">
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width: 100%; text-algin: left; margin-top: 15px">
      <Paging
        :pageNum="this.pageForm.page"
        :total="count"
        :pageSize="this.pageForm.pageSize"
        :small="true"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      ></Paging>
    </div>
    <!-- 操作项目 -->
    <el-dialog
      :title="showForm.name"
      :visible.sync="madecourseDemo"
      :close-on-click-modal="false"
      @close="closeMadecourseDemo"
      width="45%"
    >
      <div style="width: 100%;">
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
        >
        </video-player>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Paging from "@/components/Paging";
export default {
  // 注册组件
  components: {
    Paging,
  },
  data() {
    return {
      madecourseDemo: false,
      pageForm: {
        page: 1,
        pageSize: 12,
      },
      refresh: 0,
      showForm: {
        name: "",
        resourceUrl: "",
        coverPlan: "",
      },
      courseList: [],
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4', // url地址
          },
        ],
        poster: '', // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
      count: 0,
    };
  },

  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.courseId = sessionStorage.getItem("courseId");
    this.getalloptin();
  },
  mounted() {},
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 播放的视频信息
    topayVideo(item) {
      var that = this;
      that.showForm.name=item.name
      that.showForm.resourceUrl=item.resourceUrl

      that.showForm.coverPlan=item.coverPlan
      that.playerOptions['sources'][0]['src'] = item.resourceUrl;  //重新赋值视频地址
      that.playerOptions['poster'] = item.coverPlan;  //重新赋值视频地址
      that.madecourseDemo = true;
    },
    // 查询列表
    getalloptin() {
      var tData = {
        action: "app/course/lesson/page",
        headers: this.abdpConfig.getApiJson(),
        data: {
          page: this.pageForm.page,
          courseId: this.courseId,
          pageSize: this.pageForm.pageSize,
        },
      };
      this.abdpAjax.http(tData).then((rsp) => {
        if (rsp.data.code == 200) {
          //数据
          this.courseList = rsp.data.data.records;
          this.count = rsp.data.data.total;
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    // 关闭视频
    closeMadecourseDemo() {
      var that = this;
      that.madecourseDemo = false;
       that.showForm.name='';
      that.showForm.resourceUrl='';
      that.showForm.coverPlan='';
    },
    //上一页下一页按钮
    currentChange(val) {
      this.pageForm.pageSize = val;
      this.getalloptin();
    },
    //每页显示几条数据按钮
    sizeChange(val) {
      this.pageForm.pageSize = val;
      this.getalloptin();
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 15px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  padding: 0 20px;
  text-align: center;
}
.grid-content img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.grid-content-title {
  text-align: left;
  font-size: 15px;
  height: 30px;
}
.grid-content-title div {
  margin-top: 10px;
}
.row-bg {
  padding: 10px 0;
}
</style>
